<template>
    <div class="messages">
        <el-table :data="data_list" style="width: 100%">
            <el-table-column label="留言时间" width="300">

                <template #default="scope">
                    <div style="display: flex; align-items: center">

                        {{ scope.row.publish_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="留言内容" width="300">
                <template #default="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm @confirm="handleDelete(scope.$index, scope.row)" title="确认删除吗?"
                        confirm-button-text="确定" cancel-button-text="取消">
                        <template #reference>
                            <el-button size="small" type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination layout="prev, pager, next" background :page-size="10" :total="count"
                @current-change="choice" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import MessageStore from '@/store/MessageStore';
import { format } from '@/utils/formatTime';
const store = MessageStore()
const data_list = ref([])
const count = ref(0)
const currenpage = ref(1)
onMounted(() => {
    getData()
})
const getData = async () => {
    const result: any = await store.get_lists(currenpage.value * 10 - 10)
    result.data.forEach((item: any, index: any) => {
        result.data[index].publish_time = format.formatDate(item.publish_time)
    });
    count.value = result.count
    data_list.value = result.data
}
const handleDelete = (index: any, row: any) => {
    index

    store.one_delete(row._id)
    getData()
}
const choice = (e: number) => {
    currenpage.value = e
    getData()

}

</script>

<style lang="scss" scoped>
.messages {

    .page {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 2vw;
    }
}
</style>s